import { Swiper} from "./swiper-bundle.esm.browser.min.js";
import $ from "./jquery.js" ;
let swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    slidesPerView: 1,
    loop: true,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
   effect:'fade',
   fadeEffect:{
       crossFade:true,
   }
  });
  $('.app').on('mouseenter',function(){
   
    $('.h-img').stop().slideDown(200)
  
  });
  $('.app').on('mouseleave',function(){
    $('.h-img').stop().slideUp(200)
   });
   $('.r').on('mouseenter',function(){
   
    $('.w1w').stop().slideDown(200)
  
  });
  $('.r').on('mouseleave',function(){
    $('.w1w').stop().slideUp(200)
   });
  //  $(".nav-li>a").hover(function(){
  //    console.log(1)
  //  });
   $('#wq').children().on('mouseenter',function(){
   
    // console.log($(this).index())
    $('.wtw').eq($(this).index()).addClass('show')
    $('.wtw').eq($(this).index()).siblings().removeClass('show')
    
  });
  $('#wq').children().on('mouseleave',function(){
   
   
    $('.wtw').eq($(this).index()).removeClass('show')
   
    
  });
  $('.yyy').on('mouseleave',function(){
    $('.tw1').stop().slideUp(200)
   });
   $('.yyy').on('mouseenter',function(){
   
    $('.tw1').stop().slideDown(200)
  
  });
  $('#re6').on('mouseenter',function(){
    
    $('#r4r').addClass('show')
  });
  $('#re6').on('mouseleave',function(){
    $('#r4r').removeClass('show')
  })
  $('#rtro>a').on('mouseenter',function(){
    $('.tyty').eq($(this).index()).addClass('show');
    $('.tyty').eq($(this).index()).siblings().removeClass('show');
    $(this).addClass('kok');
    $(this).siblings().removeClass('kok');
  })
  $(window).on('scroll',function(){
    let y=$(this).scrollTop();
    if(y>=100){
      $('.p44').css('display','block');
    }else{

      $('.p44').css('display','none');
    }
  })
  $('.p44').on('click',function(){
    $(window).scrollTop(0)
  })
  $('.yey').on('mouseenter',function(){
    $('.sds').stop().fadeIn(200);
  })
  $('.yey').on('mouseleave',function(){
    $('.sds').stop().fadeOut(200);
  })
  //==================================
  $.ajax({
    type: "get",
    url: "../interface/getitems.php",
    dataType: "json"
}).then(res => {
    let template = '';
    res.forEach(el => {
     console.log(el.picture);
         let pic = JSON.parse(el.picture);
         //console.log(pic)
         //console.log(JSON.parse(el.picture))


      //   template += `<li class="item">
      //     <a href="./item.html?id=${el.id}">
      //         <div class="picture">
      //             <img src="./${pic[0].src}" alt="${pic[0].alt}">
      //         </div>
      //         <div class="title">${el.title}</div>
      //         <div class="price">${el.price}</div>
      //     </a>
      // </li>`;
      template += `<a class="o v" alt="" href="./shangping.html?id=${el.id}">
      <img src="${pic[0].src}" />
      <h4>${el.title}</h4>
      <h4 class="q11">天玑8100｜真旗舰芯</h4>
      <h4 class="e11">${el.price}元起 &nbsp;&nbsp;<s>${el.price-el.yuanjiagao}元</s></h4>
    </a>`;
    });
    $('.r-oo').html(template);
}).catch(err => {
    console.log(err);
});